<template>
    <div class="body-content">
        <div class="content-main" >
            <div class="index-main" style="height:100%;">
                <div class="w">
                    <div class=" text-center mb-5" style="margin-top: 6%;">
                        <h2>走进希美邻</h2>
                        <div class="line mb-2"></div>
                        <p>About Us</p>
                    </div>

                    <div class="container" style="padding:20px;color: #222;">
                        <div class="row" style="background: #f2f2f2;padding: 10px;">
                            <div class="col-md-12 text-center">
                            <!-- ABOUT IMAGE -->
                                <p style="margin-bottom:10px">
                                    <span style="font-family: 方正粗黑宋简体; font-size: 18px;">
                                        <br/>
                                    </span>
                                </p>
                                <p style="margin-bottom:10px">
                                    <span style="font-family: 方正粗黑宋简体; font-size: 18px;">
                                    专业承载希望，美好与你为邻
                                    </span>
                                </p>
                                <p><br/></p>
                                <p>
                                    <span style="font-size: 14px; font-family: 宋体;">
                                        &nbsp; &nbsp;
                                        秉承客户至上的原则，希美邻专注于帮助更多中国投资者成功移民海外，
                                        通过海外资产合理配置实现客户私人财富的保全、传承与增值。
                                        为客户提供更专业、更到位、更便捷的服务是我们孜孜不倦的寻求，
                                        重视企业的长远发展，始终坚持以客户为友的原则来为企业不断注入鲜活的生命力。
                                    </span>
                                </p>
                                <p>
                                    <span style=";font-family:宋体;font-size:14px">
                                    <span style="font-family:宋体">
                                        &nbsp; &nbsp;
                                        富有强劲生命力的企业凝聚着富有追求和使命感的人才，
                                        <span style="font-family: 宋体; font-size: 14px;">希美邻</span>
                                            海外公司秉承每个客户私人定制、个性化可延伸配置资产的服务模式，
                                            改变传统服务模式面对客户盲目性的
                                        </span>
                                            “主推产品”、效率拖沓等弊端，根据客户实际需求和特殊情况，
                                            一对一订专属私人服务方案，这是富有活力的服务模式，也是
                                        <span style="font-family: 宋体; font-size: 14px;">
                                            <span style="font-family: 宋体; font-size: 14px;">希美邻</span>
                                        </span>
                                        高质量服务的依托。
                                        </span>
                                    </p>
                                    <p><br/>
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="container">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="pattern-box home_carousel">
                                    <div class="pattern-head">
                                        <h3 class="h3-lg"  style="text-align: center;padding-top: 5%;">公司优势</h3>
                                        <h5 class="h5-md" style="text-align: center;">高管团队深耕移民行业数载 造就厚积薄发的品牌魅力</h5>
                                    </div>
                                    <div ref="swiperRef" class="swiper-container swiper-container-horizontal">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide pattern-item">
                                                <div class="pattern-item-title">
                                                    <img src="@/assets/image/img13.png" about="" title="" alt="">
                                                    <h3>高端移民</h3>
                                                </div>
                                                <p>致力于为高净值人群<br>提供国际身份解决方案</p>
                                            </div>
                                            <div class="swiper-slide pattern-item">
                                                <div class="pattern-item-title">
                                                    <img src="@/assets/image/img13.png" about="" title="" alt="">
                                                    <h3>精品项目</h3>
                                                </div>
                                                <p>甄选海内外优质项目<br> 获批迅速、成功率高</p>
                                            </div>
                                            <div class="swiper-slide pattern-item">
                                                <div class="pattern-item-title">
                                                    <img src="@/assets/image/img13.png" about="" title="" alt="">
                                                    <h3>案例丰富</h3>
                                                </div>
                                                <p>丰富的咨询案例库<br>365天实时监测进程<br>行业专家大咖文件团队保驾护航</p>
                                            </div>
                                            <div class="swiper-slide pattern-item">
                                                <div class="pattern-item-title">
                                                    <img src="@/assets/image/img13.png" about="" title="" alt="">
                                                    <h3>享誉业界</h3>
                                                </div>
                                                <p>专业度享誉业界<br>荣膺全球多项荣誉大奖</p>
                                            </div>
                                            <div class="swiper-slide pattern-item">
                                                <div class="pattern-item-title">
                                                    <img src="@/assets/image/img13.png" about="" title="" alt="">
                                                    <h3>贵宾服务</h3>
                                                </div>
                                                <p>全方位贵宾尊享服务<br>放心无忧</p>
                                            </div>
                                        </div>
                                    </div>
                                    <!--<div class="swiper-button-prev"></div>-->
                                    <!--<div class="swiper-button-next"></div>-->
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="wide-70 brands-section division">
                        <div class="container">
                            <!-- TEXT -->
                            <div class="row">
                                <div class="col-md-12 text-center mb-10">
                                    <h5 class="h5-md">希美邻合作伙伴</h5>
                                </div>
                            </div>
                            <div class="row-hezuo brands-holder">
                                <div class="col-sm-6 col-md-3">
                                    <div class="brand-logo">
                                        <img src="@/assets/image/about1.png" alt="" class="img-fluid">
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="brand-logo">
                                        <img src="@/assets/image/about2.png" alt="" class="img-fluid">
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="brand-logo">
                                        <img src="@/assets/image/about3.png" alt="" class="img-fluid">
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="brand-logo">
                                        <img src="@/assets/image/about4.png" alt="" class="img-fluid">
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="brand-logo">
                                        <img src="@/assets/image/about5.png" alt="" class="img-fluid">
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="brand-logo">
                                        <img src="@/assets/image/about6.png" alt="" class="img-fluid">
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="brand-logo">
                                        <img src="@/assets/image/about7.png" alt="" class="img-fluid">
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="brand-logo">
                                        <img src="@/assets/image/about8.png" alt="" class="img-fluid">
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="brand-logo">
                                        <img src="@/assets/image/about9.png" alt="" class="img-fluid">
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="brand-logo">
                                        <img src="@/assets/image/about10.png" alt="" class="img-fluid">
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="brand-logo">
                                        <img src="@/assets/image/about11.png" alt="" class="img-fluid">
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="brand-logo">
                                        <img src="@/assets/image/about12.png" alt="" class="img-fluid">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="index-m-main">
                <div class=" text-center mb-5" style="margin-top: 6%;">
                    <h2>走进希美邻</h2>
                    <div class="line mb-2"></div>
                    <p>About Us</p>
                </div>
                <div class="container" style="padding:20px;color: #222;">
                        <div class="row" style="background: #f2f2f2;padding: 10px;">
                            <div class="col-md-12 text-center">
                            <!-- ABOUT IMAGE -->
                                <p style="margin-bottom:10px">
                                    <span style="font-family: 方正粗黑宋简体; font-size: 18px;">
                                        <br/>
                                    </span>
                                </p>
                                <p style="margin-bottom:10px">
                                    <span style="font-family: 方正粗黑宋简体; font-size: 18px;">
                                    专业承载希望，美好与你为邻
                                    </span>
                                </p>
                                <p><br/></p>
                                <p>
                                    <span style="font-size: 14px; font-family: 宋体;">
                                        &nbsp; &nbsp;
                                        秉承客户至上的原则，希美邻专注于帮助更多中国投资者成功移民海外，
                                        通过海外资产合理配置实现客户私人财富的保全、传承与增值。
                                        为客户提供更专业、更到位、更便捷的服务是我们孜孜不倦的寻求，
                                        重视企业的长远发展，始终坚持以客户为友的原则来为企业不断注入鲜活的生命力。
                                    </span>
                                </p>
                                <p>
                                    <span style=";font-family:宋体;font-size:14px">
                                    <span style="font-family:宋体">
                                        &nbsp; &nbsp;
                                        富有强劲生命力的企业凝聚着富有追求和使命感的人才，
                                        <span style="font-family: 宋体; font-size: 14px;">希美邻</span>
                                            海外公司秉承每个客户私人定制、个性化可延伸配置资产的服务模式，
                                            改变传统服务模式面对客户盲目性的
                                        </span>
                                            “主推产品”、效率拖沓等弊端，根据客户实际需求和特殊情况，
                                            一对一订专属私人服务方案，这是富有活力的服务模式，也是
                                        <span style="font-family: 宋体; font-size: 14px;">
                                            <span style="font-family: 宋体; font-size: 14px;">希美邻</span>
                                        </span>
                                        高质量服务的依托。
                                        </span>
                                    </p>
                                <p><br/>
                                </p>
                            </div>
                        </div>
                </div>
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="pattern-box home_carousel">
                                <div class="pattern-head">
                                    <h3 class="h3-lg"  style="text-align: center;padding-top: 5%;">公司优势</h3>
                                    <h5 class="h5-md" style="text-align: center;">高管团队深耕移民行业数载 造就厚积薄发的品牌魅力</h5>
                                </div>
                                <div ref="swiperRefM" class="swiper-container swiper-container-horizontal">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide pattern-item">
                                            <div class="pattern-item-title">
                                                <img src="http://www.iqiaowai.com/templets/new/images/img_qm/img13.png" about="" title="" alt="">
                                                <h3>高端移民</h3>
                                            </div>
                                            <p>致力于为高净值人群<br>提供国际身份解决方案</p>
                                        </div>
                                        <div class="swiper-slide pattern-item">
                                            <div class="pattern-item-title">
                                                <img src="http://www.iqiaowai.com/templets/new/images/img_qm/img13.png" about="" title="" alt="">
                                                <h3>精品项目</h3>
                                            </div>
                                            <p>甄选海内外优质项目<br> 获批迅速、成功率高</p>
                                        </div>
                                        <div class="swiper-slide pattern-item">
                                            <div class="pattern-item-title">
                                                <img src="http://www.iqiaowai.com/templets/new/images/img_qm/img13.png" about="" title="" alt="">
                                                <h3>案例丰富</h3>
                                            </div>
                                            <p>丰富的咨询案例库<br>365天实时监测进程<br>行业专家大咖文件团队保驾护航</p>
                                        </div>
                                        <div class="swiper-slide pattern-item">
                                            <div class="pattern-item-title">
                                                <img src="http://www.iqiaowai.com/templets/new/images/img_qm/img13.png" about="" title="" alt="">
                                                <h3>享誉业界</h3>
                                            </div>
                                            <p>专业度享誉业界<br>荣膺全球多项荣誉大奖</p>
                                        </div>
                                        <div class="swiper-slide pattern-item">
                                            <div class="pattern-item-title">
                                                <img src="http://www.iqiaowai.com/templets/new/images/img_qm/img13.png" about="" title="" alt="">
                                                <h3>贵宾服务</h3>
                                            </div>
                                            <p>全方位贵宾尊享服务<br>放心无忧</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div id="brands-2" class="wide-70 brands-section division">
                    <div class="container">
                        <!-- TEXT -->
                        <div class="row">
                            <div class="col-md-12 text-center mb-10">
                                <h5 class="h5-md">希美邻合作伙伴</h5>
                            </div>
                        </div>
                        <div class="row-hezuo brands-holder">
                                <div class="col-sm-6 col-md-3">
                                    <div class="brand-logo">
                                        <img src="@/assets/image/about1.png" alt="" class="img-fluid">
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="brand-logo">
                                        <img src="@/assets/image/about2.png" alt="" class="img-fluid">
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="brand-logo">
                                        <img src="@/assets/image/about3.png" alt="" class="img-fluid">
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="brand-logo">
                                        <img src="@/assets/image/about4.png" alt="" class="img-fluid">
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="brand-logo">
                                        <img src="@/assets/image/about5.png" alt="" class="img-fluid">
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="brand-logo">
                                        <img src="@/assets/image/about6.png" alt="" class="img-fluid">
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="brand-logo">
                                        <img src="@/assets/image/about7.png" alt="" class="img-fluid">
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="brand-logo">
                                        <img src="@/assets/image/about8.png" alt="" class="img-fluid">
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="brand-logo">
                                        <img src="@/assets/image/about9.png" alt="" class="img-fluid">
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="brand-logo">
                                        <img src="@/assets/image/about10.png" alt="" class="img-fluid">
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="brand-logo">
                                        <img src="@/assets/image/about11.png" alt="" class="img-fluid">
                                    </div>
                                </div>
                                <div class="col-sm-6 col-md-3">
                                    <div class="brand-logo">
                                        <img src="@/assets/image/about12.png" alt="" class="img-fluid">
                                    </div>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import Swiper from 'swiper'
    export default {
        data(){
            return{
                swiper: null,
                currentIndex: 0,
            }
        },
        created () {

        },
        mounted() {
            this.getSwiper(this.$refs.swiperRef);
            this.getSwiper(this.$refs.swiperRefM);
        },
        methods: {
            getSwiper(swiperBox) {
                let vm = this;
                this.swiper = new Swiper(swiperBox, {
                    watchSlidesProgress: true,
                    slidesPerView: 'auto',
                    centeredSlides: true,
                    loop: true,
                    loopedSlides: 5,
                    autoplay: {
                        delay: 2000,
                        stopOnLastSlide: false,
                        disableOnInteraction: false,
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    on: {
                        progress: function (progress) {
                            for (let i = 0; i < this.slides.length; i++) {
                                let slide = this.slides.eq(i);
                                let slideProgress = this.slides[i].progress;
                                let modify = 1;
                                if (Math.abs(slideProgress) > 1) {
                                    modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
                                }
                                let translate = slideProgress * modify * 100  + 'px';
                                let scale = 1 - Math.abs(slideProgress) / 5;
                                let zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                                // console.log("translate ",translate);
                                slide.transform('translateX(' + translate + ') scale(' + scale + ')');
                                slide.css('zIndex', zIndex);
                                slide.css('opacity', 1);
                                if (Math.abs(slideProgress) > 3) {
                                    slide.css('opacity', 0);
                                }
                            }
                        },
                        slideChangeTransitionEnd: function () {
                            //切换结束时，告诉我现在是第几个slide
                            vm.currentIndex = this.activeIndex;
                            // console.log("slideChangeTransitionEnd  ",vm.currentIndex);
                        },
                        setTransition: function (transition) {
                            for (let i = 0; i < this.slides.length; i++) {
                                let slide = this.slides.eq(i)
                                slide.transition(transition);
                            }

                        }
                    }

                })
            },
        },
        name: "aboutus",
    }
</script>

<style lang="scss" scoped>
@import "src/assets/css/project-index";
.body-content{
    .content-main{
        text-align: center;
        h2{
            font-size: 2rem;
            font-weight: 600;
            p{
                font-size: 1.05rem;
            }
        }
    }
    .h3-lg{
        font-size: 2.75rem;
    }
    .h5-md {
        font-size: 1.25rem;
    }
    .row-hezuo {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        // margin-right: -15px;
        // margin-left: -15px;
        gap:10px;
    }
    .col-md-3 {
        -ms-flex: 0 0 24%;
        flex: 0 0 24%;
        max-width: 24%;
    }
    .index-m-main{
        .col-md-3 {
            -ms-flex: 0 0 47%;
            flex: 0 0 47%;
            max-width: 50%;
        } 
    }
    .brand-logo{
        text-align: center;
        padding: 25px;
        background-color: #fff;
        border: 1px solid #eef2f5;
        margin-bottom: 30px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    
    }
    .brand-logo:hover {
        background-color: #fff; 
        border: 1px solid #f5f5f5;
        -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, .15);
        -moz-box-shadow: 0 0 15px rgba(0, 0, 0, .15);
        box-shadow: 0 0 15px rgba(0, 0, 0, .15);
    }
    .img-fluid {
        display: inline-block;
        max-width: 100%;
        height: auto;
    }
    .brands-section h5 {
        letter-spacing: -0.5px;
        margin-bottom: 40px;
        font-size: 1.25rem;
        color: #222;
        font-family: 'Muli', sans-serif;
        font-weight: 600;
    }
    .wide-70{
        padding-top: 40px;
        padding-bottom: 10px;
    }
}

.home_carousel {
    position: relative;
    .swiper-container {
        width: 100%;
        height: 400px;
        margin-top: 40px;
        .swiper-slide {
            display: block;
            position: relative;
            width: 330px;
            height: 360px;
            background: #fff;
            box-shadow: 0 12px 24px rgba(3, 74, 115, 0.1);
            border-radius: 8px;
        }
        .swiper-slide-active{
            /*width: 330px;*/
            transition: width,height,transform,left,top;
            transition-duration: .4s;
        }
        .pattern-item-title{
            width: 100%;
            height: 240px;
            padding-top: 30px;
            margin-bottom: 30px;
            border-radius: 8px 8px 0 0;
            background-color: #006C2E;
            background-image: -moz-linear-gradient(180deg,#006C2E 0%,#0ba360 53%,#3cba92 100%);
            background-image: -webkit-linear-gradient(180deg,#006C2E 0%,#0ba360 53%,#3cba92 100%);
            background-image: -ms-linear-gradient(180deg,#006C2E 0%,#0ba360 53%,#3cba92 100%);
            background-image: linear-gradient(180deg,#006C2E 0%,#0ba360 53%,#3cba92 100%);
            img {
                vertical-align: top;
                width: 70%;
                display: inline-block;
                background-color: transparent;
            }
            h3 {
                color: #fff;
                font-size: 18px;
                font-weight: 400;
            }
        }
        .swiper-slide p {
            padding-top: 0;
            text-align: center;
            color: #636363;
            font-size: 16px;
            margin: 0;
        }
    }
}

@media only screen and (max-width: 960px) {
    .home_carousel{
        .swiper-container {
            width: 100%;
            height: 300px;
            margin-top: 40px;
            .swiper-slide{
                width: 260px;
                height: 280px;
            }
            .pattern-item-title{
                height: 160px;
                img{
                    width: 50%;
                }
            }
        }
    }
}
</style>